<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<div class="search-box">
				<el-form>
					<el-form-item label="用户来源">
						<el-button-group>
							<el-button :type="buttonType('source_id', 0)" @click="checkTab(0)">全部</el-button>
							<el-button :type="buttonType('source_id', 1)" @click="checkTab(1)">微信公众号</el-button>
							<el-button :type="buttonType('source_id', 2)" @click="checkTab(2)">微信小程序</el-button>
							<el-button :type="buttonType('source_id', 3)" @click="checkTab(3)">PC</el-button>
							<el-button :type="buttonType('source_id', 4)" @click="checkTab(4)">H5</el-button>
							<el-button :type="buttonType('source_id', 5)" @click="checkTab(5)">APP</el-button>
						</el-button-group>
					</el-form-item>
				</el-form>
				<el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;">
					<el-form-item label="用户标签">
						<el-select v-model="searchForm.label_id" placeholder="请选择用户标签" multiple clearable>
							<el-option :label="item.name" :value="item.value" v-for="item in label"
									   :key="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="searchForm.phone"></el-input>
					</el-form-item>
					<el-form-item label="昵称">
						<el-input v-model="searchForm.nickname"></el-input>
					</el-form-item>
					<el-form-item label="用户ID">
						<el-input v-model="searchForm.user_id"></el-input>
					</el-form-item>
					<el-form-item label="最近消费时间">
						<el-date-picker
							v-model="searchForm.last_buy_time"
							type="daterange"
							value-format="YYYY-MM-DD"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
			<el-button type="primary" icon="el-icon-plus" @click="sendCoupon" style="margin-top: 10px">赠送优惠券</el-button>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
			<el-table
				:data="tableData"
				:row-style="{ height: '57px'}"
				@selection-change="handleSelectionChange"
				style="width: 100%;font-size: 12px">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column
					prop="user_id"
					label="ID">
				</el-table-column>
				<el-table-column
					label="头像">
					<template #default="scope">
						<el-image
							style="width: 30px; height: 30px"
							:src="scope.row.avatar"></el-image>
					</template>
				</el-table-column>
				<el-table-column
					prop="nickname"
					label="昵称">
				</el-table-column>
				<el-table-column
					prop="phone"
					label="手机号">
				</el-table-column>
				<el-table-column
					label="用户来源">
					<template #default="scope">
						<span v-if="scope.row.source_id == 1">微信公众号</span>
						<span v-if="scope.row.source_id == 2">微信小程序</span>
						<span v-if="scope.row.source_id == 3">PC</span>
						<span v-if="scope.row.source_id == 4">H5</span>
						<span v-if="scope.row.source_id == 5">APP</span>
						<span v-if="scope.row.source_id == 0">默认</span>
					</template>
				</el-table-column>
				<el-table-column
					width="150"
					prop="create_time"
					label="首次消费时间">
				</el-table-column>
				<el-table-column
					width="150"
					prop="last_buy_time"
					label="最近消费时间">
				</el-table-column>
				<el-table-column
					label="操作"
					width="250"
					fixed="right">
					<template #default="scope">
						<el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<Pages :form="searchForm" :page-obj="page" @pageChange="pageChangeHandle" @pageJump="getList"></Pages>

		</el-card>
	</el-main>

	<el-dialog title="赠送优惠券" v-model="dialogVisible" width="500px" destroy-on-close :close-on-click-modal="false">
		<el-form :model="couponForm" ref="ruleForm" label-width="80px">
			<el-form-item>
				<el-button type="primary" icon="el-icon-shopping-cart" @click="selectCoupon" size="small" style="padding: 10px !important;">选择优惠券</el-button>
			</el-form-item>
			<el-form-item label="优惠券名">
				<el-input v-model="couponForm.coupon_name" disabled></el-input>
			</el-form-item>
			<el-form-item label="赠送数量">
				<el-input v-model="couponForm.num" type="number"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sendSubmit()">赠 送</el-button>
			</div>
		</template>
	</el-dialog>

	<el-dialog
		class="goods-select"
		title=""
		v-model="couponDialogVisible"
		width="1000px">
		<coupon-single-select @selected-coupon="handleSelectedCoupon" @close-dialog="couponDialogVisible=false"></coupon-single-select>
	</el-dialog>

	<detail-dialog v-if="detailDialogVisible" ref="detailDialog" @closed="detailDialogVisible=false"
				 :close-on-click-modal="false"></detail-dialog>
</template>

<script>
import Pages from "@/components/pages/index.vue";
import couponSingleSelect from "@/components/couponSingleSelect/index.vue";
import detailDialog from "./detail.vue";

export default {
	name: "user",
	components: {detailDialog, couponSingleSelect, Pages},
	data() {
		return {
			label: {},
			searchForm: {
				label_id: '',
				phone: '',
				nickname: '',
				last_buy_time: [],
				source_id: '',
				user_id: '',
				page: 1,
				limit: 10
			},
			balanceForm: {
				user_id: 0,
				type: '1',
				balance: 0
			},
			page: {
				total: 0
			},
			tableData: [],
			couponForm: {
				user_ids: [],
				coupon_id: 0,
				coupon_name: '',
				num: 1
			},
			couponDialogVisible: false,
			dialogVisible: false,
			detailDialogVisible: false
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		async getList() {
			let res = await this.$API.user.list.get(this.searchForm)
			this.label = res.data.label
			this.tableData = res.data.list.data
			this.page.total = res.data.list.total
		},
		// 搜索
		onSubmit() {
			this.searchForm.page = 1
			this.getList()
		},
		// 选择状态
		checkTab(type) {
			this.searchForm.source_id = type
			this.searchForm.page = 1
			this.getList()
		},
		// 翻页
		pageChangeHandle(page) {
			this.searchForm.page = page
			this.getList()
		},
		// 选择样式
		buttonType(field, type) {
			if (field == 'source_id') {
				if (this.searchForm.source_id == type) {
					return 'primary'
				}
			}
		},
		// 发送优惠券
		sendCoupon() {
			if (this.couponForm.user_ids.length == 0) {
				this.$message.error('请选择要发放的用户')
				return;
			}

			this.dialogVisible = true
		},
		// 详情
		handleDetail(row) {
			this.detailDialogVisible = true
			this.$nextTick(() => {
				this.$refs.detailDialog.open().setData(row)
			})
		},
		// 批量选择
		handleSelectionChange(row) {
			this.couponForm.user_ids = row.map(item => {
				return item.user_id
			})
		},
		// 选择了优惠券
		handleSelectedCoupon(row) {
			this.couponForm.coupon_id = row[0].id
			this.couponForm.coupon_name = row[0].name
			this.couponDialogVisible = false
		},
		// 选择优惠券
		selectCoupon() {
			this.couponDialogVisible = true
		},
		// 发送优惠券
		async sendSubmit() {
			if (this.couponForm.coupon_id == 0) {
				this.$message.error('请选择要发送的优惠券')
				return
			}

			if (this.couponForm.num <= 0) {
				this.$message.error('赠送的数量必须大于0')
				return
			}

			let res = await this.$API.user.sendCoupon.post(this.couponForm)
			if (res.code == 0) {
				this.$message.success(res.msg)
				setTimeout(() => {
					this.dialogVisible = false
					this.couponForm = this.$options.data().couponForm
				}, 500)
				this.getList()
			} else {
				this.$message.error(res.msg)
			}
		}
	}
}
</script>

<style scoped>
.search-box .el-form-item {
	margin-bottom: 10px !important;
}

.el-table__row td {
	height: 57px !important;
}
.el-button--small {
	padding: 0 !important;
}
</style>
